<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <span>{{msg | datastr}}</span>
    </div>

    <div id="app1">
        <h1 v-if="awesome">Vue is awesome!</h1>
        <h1 v-else>Oh no</h1>
    </div>
</body>
<script src="./js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
      Vue.filter( "datastr",function (value) {

          return value.toUpperCase();
      })

      new Vue({
          el:"#app",
          data:{
              msg:"ceshi"
          },
          filters:{
              "datastr":function (value) {

                  return value.toUpperCase();
              }
          }
      })

      new Vue({
          el:"#app1",
          data:{
              awesome : "ddddd"
          }
      })

</script>
</html>